<template>
    <view>
        <!-- tab栏 -->
        <scroll-view scroll-x="true" style="white-space: nowrap;position: sticky;top: 0;margin-right: 30rpx;"
            :scroll-into-view="currentTabId" scroll-with-animation="true"
            :class="['tab-style', tabStickStyle ? 'tab-stick-style' : '']">
            <view style="display: inline-block; overflow:hidden;" v-for="(item, index) in tabList" wx:key="index" class="tab-item"
                :class="[currentTabIndex == index ? 'tab-item-active' : '', '']" id="t{{index}}"
                @click="changeTab(index)">
                <view >{{ item.name }}</view>
				<view class="tabLine"></view>
            </view>
            <view style="display: inline-block; overflow:hidden;width: 40rpx;"></view>
        </scroll-view>
    </view>
</template>
<script>
export default {
    name: 'BhTabbarscroll',
    emits: ['changeTab'],
    props: {
        tabList: {
            type: Array,
            default: []
        },
        currentTabIndex: {
            type: Number,
            default: 0
        },
        tabHeight: {
            type: Number,
            default: 50
        },
        topHeight: {
            type: Number,
            default: 0,
        }
    },
    data(){
        return {
            tabStickStyle: false
        }
    },
    methods: {
        changeTab(tabIndex) {
            this.$emit('changeTab', tabIndex)
        }
    },
    computed: {
        currentTabId: function () {
            let newIndex = this.currentTabIndex - 2
            newIndex = newIndex <= 0 ? 0 : newIndex
            console.log('currentTAbId:', newIndex)
            return 't' + newIndex
        },
    },
}
</script>
<style scoped lang="scss">
.tab-style {
    z-index: 1;
    padding: 20rpx 40rpx;
    /* height: 40rpx; */
}

.tab-stick-style {
    background-color: white;
    border-bottom: 1px solid rgba(255, 113, 65, 0.4);
}

.tab-item {
  display: inline-block;
  white-space: nowrap;
  font-family: 苹方-简;
  font-size: 32rpx;
  text-align: center;
  height: 50rpx;
  letter-spacing: 0px;
  position: relative;
  color: #333333;
  /* color: #BE8572; */
  padding-bottom: 20rpx;
  margin-right: 80rpx;
  &:last-child{
	  margin-right: 0;
  }
  .tabLine{
	  content: '';
	  position: absolute;
	  bottom: 0rpx;
	  /* 控制伪元素的位置，负值可以让它超出父元素底部 */
	  left: 50%;
	  /* 将伪元素定位到父元素的中间 */
	  transform: translateX(-50%);
	  /* 将伪元素居中 */
	  width: 40rpx;
	  /* 控制伪元素的宽度 */
	  height: 14rpx;
	  /* 控制伪元素的高度，即下边框的高度 */
  }
}

.tab-item-active {
  font-size: 34rpx;
  font-weight: 600;
  color: #C64C23;
  .tabLine{
  	background-image: url(../static/images/tab-sele.png);
  	background-size: 100%;
  
  }
}


</style>